<template>
<div>
  <van-nav-bar
    title="订单管理"
    left-arrow
    @click-left="$router.back()"
  />
  <van-swipe-cell v-for="item in orderList" :key="item.id">
    <van-card
      :num="'充电宝编号'+item.orderId"
      v-bind:price="item.money"
      v-bind:desc="item.remark"
      v-bind:title="item.username"
      style=" margin: 0 ;background-color: white"
      :thumb="'http://123.56.158.143:8250/getImgStream?imgPath='+item.froUser.avatar"
    />
    <template #right>
      <van-button square text="删除" type="danger" style=" height: 100%;" @click="deleteButton(item.id)"/>
    </template>
  </van-swipe-cell>
</div>
</template>

<script>
import axios from 'axios'
const orderList = []
export default {
  name: 'Order',
  data () {
    return {
      orderList: { ...orderList }
    }
  },
  computed: {
    // 映射到组件当中
    // 将容器里的数据映射到本地里
    userInfo () {
      return this.$store.state.user
    }
  },
  methods: {
    getOrder () {
      this.getRequest(`/fro/order/user/${this.userInfo.user.id}`).then(({ data }) => {
        if (data.code === 200) {
          this.orderList = data.data
          console.log(data.data)
        }
      })
    },
    deleteButton (id) {
      console.log(id)
      axios.delete(`/fro/order/delete/${id}`).then(({ data }) => {
        if (data.code === 200) {
          this.$notify({
            message: '删除成功'
          }, () => {
            this.getOrder()
          })
        }
      })
    }
  },
  created () {
    this.getOrder(16)
  }
}
</script>

<style scoped>

</style>
